<template>
  <div>
    <z-space vertical>
<z-quill-editor :modules="modules" :tool-bar-bottom="true">
  <template #ext__beforeend="scope">
    <div>
      <el-button @click="insertQuestion(scope)">插入问题</el-button>
      <el-button @click="insertAnwser(scope)">插入回答</el-button>
    </div>

  </template>
  <template #toolbar="scope">
     <span class="ql-formats">
        <div class="ql-test"><z-color-picker
        @change="onColorSelect(scope, $event)"
        ></z-color-picker></div>
     </span>
  </template>
</z-quill-editor>
    </z-space>
  </div>
</template>

<script>

import '@/zpkgs/components/z-editor/quill-mention/quill.mention'
import ZColorPicker from "@example/plugins/example/components/ZColorPicker";

const atValues = [
  { id: 1, value: "Fredrik 是的是的" },
  { id: 2, value: "Patrik 是多少" }
];


export default {
  components: {ZColorPicker},
  data() {
    return {
      modules: {
        mention: {
          allowedChars: /^[A-Za-z\sÅÄÖåäö\u4e00-\u9fa5]*$/,
          mentionDenotationChars: ["@", "#"],
          source: async function(searchTerm, renderList, mentionChar) {
            let values;

            if (mentionChar === "@") {
              await ZY.sleep(100);
              values = atValues;
            }

            // console.log('sdsddddd', searchTerm)
            if (searchTerm.length === 0) {
              renderList(values, searchTerm);
            }
            else {
              // 过滤下拉选择
              const matches = [];
              // console.log(values.map(v => format(v.value)), searchTerm)
              for (let i = 0; i < values.length; i++) {
                let val = values[i].value
                if (val.includes(searchTerm)) {
                  matches.push(values[i]);
                }
              }
              renderList(matches, searchTerm);
            }
          }
        }
      }
    }
  },
  methods: {
    onColorSelect(scope, e) {
      console.log('onColorSelect', scope, e)
      // scope.quill.focus()
      scope.quill.format('color', e, Quill.sources.USER)
    },
    insertQuestion(scope) {
      scope.insertTest('问：' + ZY.rid() + ZY_EXT.randomStrArr(30).join(''), {
        'color': 'red',
      })
    },
    insertAnwser(scope) {
      scope.insertTest('答：'  + ZY.rid() + ZY_EXT.randomStrArr(30).join(''), {
        'color': 'blue',
      })
    }
  }
}
</script>
